<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('社工详细')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 基础信息</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">认证信息</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">相册信息</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">服务项目</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body" th:object="${info}">
                            <div>
                                名字：
                                <text th:utext="*{name}"/>
                            </div>
                            <div class="m-t">
                                性别：
                                <text th:utext="*{(sex ==1 ? '男':'女')}"/>
                            </div>
                            <div class="m-t">
                                个人描述：
                                <text th:utext="*{des}"/>
                            </div>
                            <div class="m-t">
                                社工头像：<img th:src="*{avatar}" width="50" height="50"
                                          th:onclick="|onLookjishitouxiang()|">
                            </div>
                            <div class="m-t">
                                社工照片：<img th:src="*{artAvatar}" width="50" height="50"
                                          th:onclick="|onLookjishizhaopian()|">
                            </div>
                            <div class="m-t">
                                已服务：
                                <text th:utext="*{num}"/>
                            </div>
                            <div class="m-t">
                                评分：
                                <text th:utext="*{score}"/>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body" >
                            <div th:object="${info}">
                                是否认证：
                                <text th:utext="*{(codeAuth ==2 ? '未认证':'已认证')}"/>
                                <div th:if="false==*{(codeAuth ==2)}">

                                    <div th:object="${WorkerRenzheng}">
                                        姓名：
                                        <text th:utext="*{name}"/>
                                        <br>
                                        身份证号：
                                        <text th:utext="*{code}"/>
                                        <br>
                                        身份证正面照：
                                        <img th:src="*{codeAPhoto}" style="width: 50px;height: 50px;"
                                             th:onclick="|onLookZhengShenFen()|"/>
                                        <br>
                                        <br>
                                        身份证反面照：
                                        <img th:src="*{codeBPhoto}" style="width: 50px;height: 50px;"
                                             th:onclick="|onLookfanShenFen()|"/>
                                    </div>
                                </div>
                            </div>
                            ------资质信息-----
                            <div>
                                <img class="m-l m-t" th:each="url:${ziZhiList}" th:src="*{url.url}" width="200"
                                     height="200"
                                     th:onclick="|onLookZiZhi()|"/>
                            </div>

                        </div>

                    </div>
                    <div id="tab-3" class="tab-pane">
                        <div class="panel-body">
                            <div class="flex" style="flex-direction: row;flex-wrap: wrap;">
                                <img class="m-l m-t" th:each="photo:${photoLists}" th:src="*{photo.url}" width="200"
                                     height="200"
                                     th:onclick="|onLookjishixiangce()|"/>
                            </div>
                        </div>
                    </div>
                    <div id="tab-4" class="tab-pane">
                        <div class="panel-body">
                            <div th:each="item:${workerItemList}">
                                <text th:utext="*{item.iName}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "jiajia/worker"


    // function getInfo() {
    //     var config = {
    //         url: prefix+"/",
    //         beforeSend: function () {
    //             $.modal.loading("加载中...");
    //             $.modal.disable();
    //         },
    //         success: function(result) {
    //
    //         }
    //     };
    //     $.ajax(config)
    // }
    //
    // function getphotoList() {
    //     var config = {
    //         url: prefix+"/",
    //         type: "post",
    //         dataType: "json",
    //         data: data,
    //         beforeSend: function () {
    //             $.modal.loading("加载中...");
    //             $.modal.disable();
    //         },
    //         success: function(result) {
    //
    //         }
    //     };
    //     $.ajax(config)
    // }

    function onLookZhengShenFen() {
        var v = [[${WorkerRenzheng}]];
        this.onLookPhotoListsClick(v.codeAPhoto)
    }

    function onLookfanShenFen() {
        var v = [[${WorkerRenzheng}]];
        this.onLookPhotoListsClick(v.codeBPhoto)
    }

    function onLookjishitouxiang() {
        var v = [[${info}]];
        this.onLookPhotoListsClick(v.avatar)
    }

    function onLookjishizhaopian() {
        var v = [[${info}]];
        this.onLookPhotoListsClick(v.artAvatar)
    }

    function onLookjishixiangce() {
        var org = [[${photoLists}]]
        var a = []
        for (let i = 0; i < org.length; i++) {
            a.push(org[i].url)
        }
        this.onLookPhotoListsClick1(a);

    }

    function onLookZiZhi() {
        var org = [[${ziZhiList}]]
        var a = []
        for (let i = 0; i < org.length; i++) {
            a.push(org[i].url)
        }
        this.onLookPhotoListsClick1(a);
    }

    function onLookPhotoListsClick1(codeAPhoto) {
        var data = [];
        for (var i = 0; i < codeAPhoto.length; i++) {
            var url = codeAPhoto[i];
            data.push({"alt": "", "pid": 0, "src": url, "thumb": url});
        }
        var json = {"title": "", "id": 1, "start": 0, "data": data};

        layer.photos({
            photos: json
            , anim: 5
        });
    }

    function onLookPhotoListsClick(codeAPhoto) {
        var data = [];
        var json = {"title": "", "id": 1, "start": 0, "data": data};
        var url = codeAPhoto
        data.push({"alt": "", "pid": 0, "src": url, "thumb": url});

        layer.photos({
            photos: json
            , anim: 5
        });
    }
</script>
</body>


</html>
